<template>
    <div>
        <ZkModalVue class="select-contact" :title="title" :size="'lg'" :visible="visible" @cancel="handleCancel" >
            <ZkList class="list" ref="table" rowKey="contactsId" :type="2" :searchs="list.searchs" :columns="list.columns" :data="list.loadData">
                <template #action="record">
                    <span>
                        <zk-btn icon="check-circle" :disabled="true" v-if="selectedList.find(i => i.contactsId == record.contactsId)">已选</zk-btn>
                        <zk-btn @click="handleSelected(record)" icon="edit" v-else>选择</zk-btn>
                    </span>
                </template>
            </ZkList>
        </ZkModalVue>
    </div>
</template>
<script>
import ZkModalVue from '@/appBase/ZkModal.vue';
import { InputTypeEnum } from '@/appBase/enum';
import ZkList from '@/appBase/ZkList.vue';
import { queryContactsList } from "@/api/contact";
import { getContactUsers } from '@/modules/common/service/options';

// 添加联系人组件
export default {
    name: "SelectContact",
    components: {
        ZkModalVue,
        ZkList,
    },
    props: {
        // 模式 1=单选  2=多选
        mode: {
            type: Number,
            default: () => 1,
        },
    },
    data() {
        return {
            title: '联系人添加',
            visible: false,
            list: {
                searchs: [
                    { title: "申请人", dataIndex: 'createdUserName', type: InputTypeEnum.SINGLE_SEARCH_SELECT, options: (val) => getContactUsers(0, { name: val }) },
                    { title: "联系人电话", dataIndex: 'phone' },
                ],
                columns: [
                    { title: "联系人姓名", dataIndex: "contactsName", width: "150px", maxLength: 10 },
                    { title: "联系人电话", dataIndex: "phone", width: "150px", maxLength: 13 },
                    { title: "任职客户", dataIndex: "customerName", width: "100px" },
                    { title: "职务", dataIndex: "contactsPost", width: "100px" },
                    { title: "操作", scopedSlots: { customRender: "action" }, width: '150px', fixed: 'right' },
                ],
                loadData: (queryParams, parameter) => {
                    return queryContactsList(queryParams, parameter);
                }
            },
            selectedList: [],
        }
    },
    methods: {
        /**
         * 显示
         * @param {Object} param
         * @param {Array || Object} param.selectedData 选中的数据
         * selectedData: {} || []
         */
        show(param) {
            this._onOk = param.onOk;
            this._onCancel = param.onCancel;
            this.selectedList.splice(0);
            const selectedData = param.selectedData;
            if (selectedData) {
                if (this.mode === 1) {
                    this.selectedList.push(selectedData);
                } else {
                    this.selectedList.push(...selectedData);
                }
            }
            this.visible = true;
        },
        handleOk() {
            this.visible = false;
            const res = this.mode === 1 ? {...this.selectedList[0]} : [...this.selectedList]; 
            if (this._onOk) this._onOk(res);
        },
        handleCancel() {
            this.visible = false;
            if (this._onCancel) this._onCancel();
        },
        handleSelected(item) {
            if (this.mode === 1) {
                this.selectedList.splice(0);
                this.selectedList.push(item);
                this.handleOk();
            } else {
                this.selectedList.push(item);
            }
        },
    }
}
</script>
<style lang="less">
.select-contact {
    .list {
        margin: -24px;
        margin-bottom: 0;
    }
}
</style>